<script setup>
import { reactive } from "vue";
import CesiumMap from "@/components/CesiumMap.vue";
import layerControl from "@/components/layerControl.vue";
import ToolBtnBox from "@/components/ToolBtnBox.vue";
import LeftOne from "@/components/LeftOne.vue";
import LeftTwo from "@/components/LeftTwo.vue";
import RightOne from "@/components/RightOne.vue";
import RightTwo from "@/components/RightTwo.vue";
import { useStore } from "vuex";
import * as Cesium from "cesium";
import * as echarts from "echarts";

let store = useStore();

let state = reactive({
  bigTime: "",
  smallTime: "",
});

// 获取图层显示
function getShow(value) {
  if (value === "layerControl") {
    store.state.layerControlShow = false;
  }
}

// 获取当前时间
setInterval(() => {
  let nowTime = new Date().toLocaleString();
  state.bigTime = nowTime.split(" ")[0];
  state.smallTime = nowTime.split(" ")[1];
}, 1000);

// 获取时间图片
function getTimePic() {
  let url;
  let time = state.smallTime.split(":");
  let hour = parseInt(time[0]);
  if (hour > 7 && hour <= 9) {
    url = "src/assets/images/headPic/sun1.png";
  } else if (hour > 9 && hour <= 14) {
    url = "src/assets/images/headPic/sun2.png";
  } else if (hour > 14 && hour <= 18) {
    url = "src/assets/images/headPic/sun3.png";
  } else if (hour > 18 && hour <= 21) {
    url = "src/assets/images/headPic/sun4.png";
  } else if (hour > 21 && hour <= 7) {
    url = "src/assets/images/headPic/sun5.png";
  }
  return url;
}
</script>

<template>
  <div class="big-box">
    <!-- 地图组件 -->
    <CesiumMap
      style="
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 5;
      "
    />
    <!-- 中间 -->
    <div class="mid-box" style="z-index: 10">
      <!-- 中左一 -->
      <div class="mid-item-box">
        <div class=""></div>
      </div>
      <!-- 中 -->
      <div class="mid-item-box2">一 Cesium Demo 一</div>
      <!-- 中右一 -->
      <div class="mid-item-box">
        <!-- 时间 -->
        <div class="mid-item-timebox">
          <!-- 图片 -->
          <div class="mid-time-pic">
            <img style="width: 25px; height: 25px" :src="getTimePic()" />
          </div>
          <!-- 时间 -->
          <div class="mid-time-box">
            <div>{{ state.bigTime }}</div>
            <div>{{ state.smallTime }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 左边 -->
    <div class="left-box" style="z-index: 10">
      <!-- 左边一 -->
      <div class="item-box">
        <LeftOne></LeftOne>
      </div>
      <!-- 左边二 -->
      <div class="item-box">
        <LeftTwo></LeftTwo>
      </div>
    </div>
    <!-- 右边 -->
    <div class="right-box" style="z-index: 10">
      <!-- 右边一 -->
      <div class="item-box">
        <RightOne></RightOne>
      </div>
      <!-- 右边二 -->
      <div class="item-box" v-if="!store.state.layerControlShow">
        <RightTwo></RightTwo>
      </div>
      <!-- 图层管理 -->
      <layerControl
        v-if="store.state.layerControlShow"
        @boxShow="getShow"
        style="position: absolute; right: 0; bottom: 1vh; z-index: 10"
      />
    </div>

    <!-- 工具箱 -->
    <ToolBtnBox
      class="showSlowlyCss"
      style="position: absolute; bottom: 10vh; right: 20.2vw; z-index: 25"
    />
  </div>
</template>

<style scoped>
.mid-box {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  width: 100vw;
  height: 8vh;
  background-color: rgba(58, 64, 79, 0.6);
  animation: showSlowly 3s;
}
.mid-item-box {
  display: flex;
  align-items: center;
  position: relative;
  width: 30%;
  height: 100%;
}
.mid-item-box2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40%;
  height: 100%;
  color: #fff;
  font-size: 32px;
}
.mid-item-pic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.mid-item-timebox {
  display: flex;
  position: absolute;
  right: 1vw;
  color: #fff;
  font-size: 14px;
}

.mid-time-pic {
  margin-right: 5px;
  display: flex;
  align-items: center;
  width: 25px;
  height: 8vh;
}
.mid-time-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  user-select: none;
}
.left-box {
  position: absolute;
  left: 0.2vw;
  top: 8vh;
  width: 20vw;
  height: 92vh;
  animation: moveRight 2s;
}

.right-box {
  position: absolute;
  right: 0.2vw;
  top: 8vh;
  width: 20vw;
  height: 92vh;
  animation: moveLeft 2s;
}

.item-box {
  margin-top: 0.5vh;
  width: 100%;
  height: 45vh;
  background-color: rgba(26, 35, 57, 0.6);
  box-shadow: 0px 0px 20px rgba(0, 72, 253, 0.2);
}

.title-box {
  position: relative;
  padding: 0.8vw;
  display: flex;
  align-items: center;
  height: 20px;
  color: #fff;
  user-select: none;
  background-color: rgba(58, 64, 79, 0.8);
}
.title-content {
  padding: 0.2vw;
  height: 38vh;
  color: #fff;
}

@keyframes moveLeft {
  0% {
    right: -20vw;
  }
  100% {
    right: 0.2vw;
  }
}

@keyframes moveRight {
  0% {
    left: -20vw;
  }
  100% {
    left: 0.2vw;
  }
}
.showSlowlyCss {
  animation: showSlowly 3s;
}
@keyframes showSlowly {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>
